<template>
	<div>
		<el-dialog :title="'【优惠券发放计划】：'+item.liveName" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1200px">
			<div class="">
				<div class="table-header">
					<el-button type="primary" @click="add()">添加优惠券发放计划</el-button>
				</div>
				
				<!-- 计划列表 -->
				<el-table :data="tableData" stripe border style="width: 100%">
					<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
					
					<el-table-column prop="planName" label="计划标题"></el-table-column>
					
					<el-table-column prop="productCouponName" label="发放优惠券" width="150"></el-table-column>
					<el-table-column prop="distributionQuantity" label="发放数量" width="100"></el-table-column>
					
					<el-table-column prop="startTime" label="发放开始时间" :formatter="forDate" width="150"></el-table-column>
					<el-table-column prop="endTime" label="发放结束时间" :formatter="forDate" width="150"></el-table-column>
					<el-table-column prop="status" label="状态" width="100" align="center">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.status == 1">上架</el-tag>
							<el-tag type="danger" v-else>下架</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column prop="createTime" label="创建时间" :formatter="forDate" width="100"></el-table-column>
					
					<el-table-column fixed="right" label="操作" width="130">
						<template slot-scope="scope">
							<el-button type="primary" size="small" @click="edit(scope.row)">编辑计划</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			
			<div slot="footer">
				<el-button @click="close">关 闭</el-button>
			</div>
		</el-dialog>
		
		<!-- 添加优惠券发放计划 -->
		<el-dialog title="添加优惠券发放计划" :visible.sync="showHandleDialog" :close-on-click-modal="false" :before-close="closeHandleDialog" width="1000px">
			<div class="form-box">
				<el-form ref="form" :model="form" :rules="rules" label-width="110px">
					<el-row>
						<el-col :span="24">
							<el-form-item label="所属直播">
								<el-input v-model="item.liveName"readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="24">
							<el-form-item label="计划标题" prop="planName">
								<el-input v-model="form.planName" placeholder="请填写发放计划的标题" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="14">
							<el-form-item label="优惠券商品" prop="productCouponName">
								<el-input v-model="form.productCouponName" placeholder="请选择优惠券商品" readonly>
									<el-button slot="append" @click="openCouponDialog">点击选择</el-button>
								</el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="10">
							<el-form-item label="发放数量" prop="distributionQuantity">
								<el-input v-model="form.distributionQuantity" placeholder="请选择优惠券商品" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="14">
							<el-form-item label="发放时间" prop="startTime">
								<el-date-picker
									v-model="planTime"
									type="datetimerange"
									range-separator="至"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									@change="chooseTime"
									style="width: 100%;"
								></el-date-picker>
							</el-form-item>
						</el-col>
						
						<el-col :span="10" v-if="isEdit">
							<el-form-item label="状态" prop="status">
								<el-radio-group v-model="form.status">
									<el-radio :label="1">上架</el-radio>
									<el-radio :label="0">下架</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			
			<div slot="footer">
				<el-button type="primary" @click="submit">保 存</el-button>
				<el-button @click="reset" v-if="!isEdit">重 置</el-button>
				<el-button @click="closeHandleDialog">取 消</el-button>
			</div>
		</el-dialog>
		
		<!-- 添加优惠券发放计划：选择优惠券商品 -->
		<el-dialog title="选择优惠券商品" :visible.sync="showChooseCouponDialog" :close-on-click-modal="false" :before-close="closeCouponDialog" width="1100px">
			<el-table :data="couponData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				<el-table-column prop="mainImage" label="商品主图" width="96" align="center">
					<template slot-scope="scope">
						<el-image style="width: 60px; height: 60px" v-if="scope.row.mainImage != ''" :src="scope.row.mainImage"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="消费券商品名称"></el-table-column>
				<el-table-column prop="saleChannel" label="销售渠道" align="center" width="100">
					<template slot-scope="scope">
						<el-tag size="small" type="success" v-if="scope.row.saleChannel == 1">商家/供应商</el-tag>
						<el-tag size="small" type="warning" v-else-if="scope.row.saleChannel == 2">直播平台</el-tag>
						<el-tag size="small" v-else>微信小程序</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="couponType" label="券类型" align="center" width="120">
					<template slot-scope="scope">
						<el-tag size="small" type="danger" v-if="scope.row.couponType == 1">新人礼券</el-tag>
						<el-tag size="small" type="warning" v-else-if="scope.row.couponType == 2">直播间叠加券</el-tag>
						<el-tag size="small" type="success" v-else>小程序充值券</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="stock" label="可售库存" width="100" align="center"></el-table-column>
				<el-table-column prop="stockForzen" label="冻结库存" width="100" align="center"></el-table-column>
				<el-table-column prop="stockSold" label="已售库存" width="100" align="center"></el-table-column>
				<el-table-column prop="stockHistory" label="累计库存" width="100" align="center"></el-table-column>
				
				<el-table-column label="操作" fixed="right" width="100">
					<template slot-scope="scope">
						<el-button type="info" size="small" disabled v-if="scope.row.selected">已选</el-button>
						<el-button type="primary" size="small" @click="chooseCoupon(scope.row)" v-else>选择</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<div class="page">
				<el-pagination
					background
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pageSize"
					layout="total, prev, pager, next"
					:total="total"
				></el-pagination>
			</div>
			
			<div slot="footer">
				<el-button @click="closeCouponDialog">关 闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { findProductCouponListByPage } from '@api/coupon/productCoupon'
	import { getCouponPlanList, addCouponPlan, editCouponPlan } from '@api/live/live'
	import dayjs from 'dayjs'
	export default {
		props: {
			isShow: Boolean,
			item: Object,
		},
		data() {
			return {
				form: {
					planName: '',
					productCouponId: '',
					productCouponCode: '',
					productCouponName: '',
					startTime: '',
					endTime: '',
					distributionQuantity: '',
					status: ''
				},
				rules: {
					planName: [{ required: true, message: '请填写发放计划的标题', trigger: 'blur' }],
					productCouponName: [{ required: true, message: '请选择要发放的优惠券商品', trigger: 'change' }],
					startTime: [{ required: true, message: '请选择发放优惠券的时间', trigger: 'blur' }],
					status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
				},
				couponlList: [],
				planTime: [],
				
				tableData: [],
				showHandleDialog: false,
				isEdit: false,
				currentItem: {},
				
				showChooseCouponDialog: false,
				couponData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getData();
				}
			}
		},
		methods: {
			getData() {
				getCouponPlanList({liveId: this.item.id})
					.then(res => {
						this.tableData = res.data;
					})
			},
			forDate(row, column) {
				if(column.property == 'createTime') {
					return row.createTime == null ? '-' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if(column.property == 'startTime') {
					return row.startTime == null ? '-' : dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if(column.property == 'endTime') {
					return row.endTime == null ? '-' : dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss');
				}
			},
			
			getCoupon() {
				findProductCouponListByPage({
					saleChannel: 2,
					status: 1,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						let list = res.data.content;
						let couponList = [];
						this.total = res.data.total;
						
						list.forEach(item => {
							if(item.id == this.currentItem.productCouponId) {
								this.$set(item, 'selected', true);
							} else {
								this.$set(item, 'selected', false);
							}
							
							if(item.couponType == 2) {
								couponList.push(item);
							}
						});
						
						this.couponData = couponList;
					})
			},
			handleCurrentChange(val) { //处理翻页
				this.currentPage = val;
				this.getCoupon();
			},
			
			chooseTime(val) { //选择时间
				this.form.startTime = val[0];
				this.form.endTime = val[1];
			},
			
			add() {
				this.showHandleDialog = true;
			},
			edit(item) {
				this.currentItem = item;
				this.form.planName = item.planName;
				this.form.startTime = item.startTime;
				this.form.endTime = item.endTime;
				this.form.productCouponId = item.productCouponId;
				this.form.productCouponCode = item.productCouponCode;
				this.form.productCouponName = item.productCouponName;
				this.form.distributionQuantity = item.distributionQuantity;
				this.form.status = item.status;
				this.planTime = [item.startTime, item.endTime];
				this.isEdit = true;
				
				this.showHandleDialog = true;
			},
			closeHandleDialog() {
				this.showHandleDialog = false;
				this.isEdit = false;
				this.currentItem = {};
				this.reset();
			},
			
			openCouponDialog() {
				this.showChooseCouponDialog = true;
				this.getCoupon();
			},
			closeCouponDialog() {
				this.showChooseCouponDialog = false;
			},
			chooseCoupon(item) {
				this.form.productCouponId = item.id;
				this.form.productCouponCode = item.productCode;
				this.form.productCouponName = item.productName;
				this.form.distributionQuantity = item.stock;
				
				this.couponData.forEach(coupon => {
					if(coupon.id == item.id) {
						coupon.selected = true;
					} else {
						coupon.selected = false;
					}
				});
			},
			
			submit() { //提交添加or编辑
				this.$refs.form.validate(valid => {
					if (valid) {
						let params = {
							liveId: this.item.id,
							planName: this.form.planName,
							startTime: this.form.startTime,
							endTime: this.form.endTime,
							productCouponId: this.form.productCouponId,
							productCouponCode: this.form.productCouponCode,
							productCouponName: this.form.productCouponName,
							distributionQuantity: this.form.distributionQuantity,
						}
						if(this.isEdit) {
							params.id = this.currentItem.id;
							params.status = this.form.status;
							
							editCouponPlan(params)
								.then(() => {
									this.$message.success('优惠券发放计划修改成功！');
									this.closeHandleDialog();
									
									this.getData();
								})
						} else {
							addCouponPlan(params)
								.then(() => {
									this.$message.success('优惠券发放计划添加成功！');
									this.closeHandleDialog();
									
									this.getData();
								})
						}
					}
				})
			},
			reset() {
				this.$refs.form.resetFields();
				
				this.form.planName = '';
				this.form.startTime = '';
				this.form.endTime = '';
				this.form.productCouponId = '';
				this.form.productCouponCode = '';
				this.form.productCouponName = '';
				this.form.distributionQuantity = '';
				this.form.status = '';
				this.planTime = [];
			},
			
			close() {
				this.$emit('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 10px;
	}
</style>